<template>
  <div class="home">
    <a-row :gutter="20">
      <a-col v-for="(item, index) in deviceStatusList" :key="index" :span="6">
        <div class="home-deviceStatus">
          <a-row>
            <a-col :span="12">
              <component
                :is="item.icon"
                :size="index == 0 ? 28 : 35"
                :class="{ 'home-deviceStatus-icon': index == 0 }"
                :style="{ color: item.color }"
              ></component>
            </a-col>
            <a-col :span="12">
              <div class="home-deviceStatus-name">{{ item.name }}</div>
              <div class="home-deviceStatus-num">
                <count-to :start-val="0" :end-val="item.num" :duration="3200"></count-to>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!--    <a-card title="生产进度" class="home-card" :bordered="false">-->
    <!--      <a-table-->
    <!--        row-key="id"-->
    <!--        :loading="loading"-->
    <!--        :pagination="pagination"-->
    <!--        :columns="columns"-->
    <!--        :data="data"-->
    <!--        :bordered="false"-->
    <!--        :size="size"-->
    <!--        @page-change="handlePageChange"-->
    <!--        @page-size-change="handlePageSizeChange"-->
    <!--      >-->
    <!--      </a-table>-->
    <!--    </a-card>-->

    <line-chart></line-chart>
    <pie-chart></pie-chart>
    <raddar-chart></raddar-chart>
    <bar-chart></bar-chart>
    <div style="text-align: left">
      <a-button>甘特图编辑</a-button>
    </div>
    <!--        <gantt-char ref="ganttChar" :tasks="tasks"></gantt-char>-->
    <!--    <gantt-char ref="ganttChar" opt-type="edit" :ids="changedTaskIds" :tasks="tasks"></gantt-char>-->
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue';
import importConfig from './home';
import { CountTo } from 'vue3-count-to';
import LineChart from '@com/dashboad/lineChart/lineChart.vue';
import PieChart from '@com/dashboad/pieChart/pieChart.vue';
import RaddarChart from '@com/dashboad/raddarChart/raddarChart.vue';
import BarChart from '@com/dashboad/barChart/barChart.vue';
import GanttChar from '@com/schedule/ganttx/ganttx.vue';

export default defineComponent({
  name: 'HomeDom',
  components: { LineChart, PieChart, RaddarChart, BarChart, CountTo, GanttChar },
  setup() {
    const { base, data, deviceStatusList, init, tapDate, handlePageChange, handlePageSizeChange, getGanttTasks } = importConfig();

    getGanttTasks();

    return {
      ...toRefs(base),
      data,
      deviceStatusList,
      init,
      tapDate,
      handlePageChange,
      handlePageSizeChange,
      getGanttTasks,
    };
  },
});
</script>

<style scoped lang="less">
.home {
  background-color: rgb(var(--gray-2));
  padding-top: 5px;

  &-deviceStatus {
    padding: 15px 0;
    border-radius: 6px;
    background-color: white;

    &-icon {
      background-color: dodgerblue;
      padding: 1px;
      border-radius: 5px;
    }

    &-name {
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;
    }

    &-num {
      color: #333333;
    }
  }

  :deep(.arco-card-header-title) {
    text-align: left;
  }

  &-card {
    margin-top: 20px;
  }
}
</style>
